<template>
  <div class="ma-content-block lg:flex justify-between">
    <!-- CRUD 组件 -->
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :sm="8" :xs="24">
          <a-form-item field="uuid" label="用户ID">
            <a-input v-model="searchForm.uuid" placeholder="请输入用户ID" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item field="user_keyword" label="用户信息搜索">
            <a-input v-model="searchForm.user_keyword" placeholder="请输入用户手机号/昵称" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item field="room_id" label="直播房ID">
            <a-input v-model="searchForm.room_id" placeholder="请输入直播房ID" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item field="community_uuid" label="团长ID">
            <a-input v-model="searchForm.community_uuid" placeholder="请输入团长ID" allow-clear />
          </a-form-item>
        </a-col>
      </template>

      <!-- Table 自定义渲染 -->
      <!-- 状态列 -->
       <template #id="{ record }">
        <div style="display: flex;align-items: center;">
          <a-image :src="record?.avatar" :preview-src-list="[record?.avatar]" style="width: 48px; height: 48px; margin-right: 8px;" />
          <div>
            <div>{{ record?.nickname }}</div>
            <div>{{ record?.phone ||'--'}}</div>
            <div>ID:{{ record?.uuid }}</div>
          </div>
        </div>
      </template>
      <!-- 上级信息列 -->
      <template #form_info="{ record }">
        <div v-if="record.community_info" style="display: flex;align-items: center;">
          <a-image :src="record.community_info?.avatar" :preview-src-list="[record.form_info?.avatar]" style="width: 48px; height: 48px; margin-right: 8px;" />
          <div>
            <div>{{ record.community_info?.nickname }}</div>
            <div>ID:{{ record.community_info?.id }}</div>
          </div>
        </div>
        <div v-else>--</div>
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-tag>{{ record.status === 1 ? '发放中' : record.status === 2 ? '发放成功' : '发放失败' }}</a-tag>
      </template>
    </sa-table>


  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import api from '@/api/marketing/banner'

const crudRef = ref()
// 搜索表单
const searchForm = ref({
  uuid: '',
  user_keyword: '',
  room_id: '',
  community_uuid: '',

})
// 搜索时间
const SearchTime = (val) => {
  searchForm.value.created_at_start_time = val[0]
  searchForm.value.created_at_end_time = val[1]
}


// SaTable 基础配置
const options = reactive({
  api: api.RedPacketLogList,
  rowSelection: { showCheckedAll: true },
})

// SaTable 列配置
const columns = reactive([
  { title: '用户信息', dataIndex: 'id', width:240 },
  { title: '上级信息', dataIndex: 'form_info', width: 240 },
  { title: '直播间ID', dataIndex: 'room_id', width: 120 },
  { title: '批次单号', dataIndex: 'batch_id', width: 300 },
  { title: '手续费', dataIndex: 'red_fee', width: 120 },
   { title: '发放金额', dataIndex: 'sign_red', width: 120 },
  { title: '发放状态', dataIndex: 'status', width: 120 },
  { title: '备注', dataIndex:'remark', width:180},
  { title: '发放时间', dataIndex: 'created_at', width: 180 },
  { title: '操作', dataIndex: '__operation', width: 0 },
])

// 页面数据初始化
const initPage = async () => {}

// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

// 页面加载完成执行
onMounted(async () => {
  initPage()
  refresh()
})
</script>
